import React, { useCallback, useState } from "react";
import { Card, Empty, Button, Divider, message, Modal } from "antd";
import { useAdminRight } from "../../data/AdminPageAuth";
import styles from "./styles.module.scss";
import { Service, LibAppView } from "@/lib";

interface IUsersCardProps {
    data: any[];
}

interface IUserRegisteUser {
    data: any;
    refresh: Function;
}

const RegisteUser = LibAppView.withLoading({
    "mountWithLoading": true,
    "controlled": true,
    "defaultVisible": false,
    "skeletonProps": {
        "paragraph": {
            "rows": 3
        }
    }
})<IUserRegisteUser>((props) => {
    const approver = useAdminRight("approver");
    const serviceApi = Service.useService();
    const item = props.data;
    const onApprove = useCallback((status: number) => {
        Modal.confirm({
            title: "确认操作",
            content: `确认${status === 1 ? "通过" : "拒绝"}注册？`,
            onOk: () => {
                props.withLoadingApi.show();
                serviceApi.send({
                    endPoint: "user.registeApprove",
                    data: {
                        ...item,
                        status
                    }
                }).then(() => {
                    props.refresh();
                    props.withLoadingApi.hide();
                }).catch((err) => {
                    props.withLoadingApi.hide();
                    typeof err !== "boolean" && message.error(err.message || "未知错误");
                });
            }
        });
    }, []);
    return (
        <>
        <span>{item.userName}</span>
            <div>
                <span>登录账户：{item.loginName}</span>
                <span>注册时间：{item.createDateTime}</span>
                <span>单位名称: {item.company}</span>
                <span>{item.region}</span>
            </div>
            { approver && <>
                <Divider type="horizontal"/>
                <div>
                    <Button type="primary" onClick={() => onApprove(1)}>通过</Button>
                    <Button type="default" onClick={() => onApprove(0)} style={{marginLeft: 5}}>拒绝</Button>
                </div>
            </>}
        </>
    );
});

const cardItemStyle = {
    width: "25%"
};
const UsersCard = LibAppView.withLoading({
    "mountWithLoading": true,
    "controlled": true,
    "defaultVisible": false
})<IUsersCardProps>((props) => {
    const [ data, setData ] = useState(props.data);
    const serviceApi = Service.useService();
    const onRefreshData = useCallback(() => {
        props.withLoadingApi.show();
        serviceApi.send({
            endPoint: "user.registeList",
            data: {
                page: 0,
                pageSize: 10
            }
        }).then((resp: any) => {
            props.withLoadingApi.hide();
            setData(resp.data || []);
        }).catch((err) => {
            props.withLoadingApi.hide();
            console.error(err);
        });
    }, []);
    return (
        <Card title="待审批注册用户" style={{overflow: "hidden", borderRadius: "3px"}}>
            {
                data.map((item) => {
                    return (
                        <Card.Grid
                            key={item.id}
                            style={cardItemStyle}
                            hoverable
                            className={styles.registeUser}
                        >
                            <RegisteUser data={item} refresh={onRefreshData}/>
                        </Card.Grid>
                    );
                })
            }
            {
                data.length === 0 && <Empty />
            }
        </Card>
    );
});

export default UsersCard;
